CSS计数器样式语言支持：面向全球受众的国际化格式

在当今全球互联的世界中，Web 开发人员需要创建迎合不同受众的网站和应用程序。这意味着不仅要考虑语言，还要考虑不同地区使用的文化惯例和编号系统。CSS 计数器样式提供了一种强大的机制，可以格式化列表和其他编号内容，以尊重这些文化差异。本综合指南将探讨 CSS 计数器样式用于国际化 (i18n) 的功能，并演示如何有效地使用它们。

了解 CSS 计数器样式

CSS 计数器是由 CSS 规则维护的变量，用于跟踪它们的使用次数。它们主要用于对列表、标题和其他元素进行编号。CSS 计数器样式扩展了此功能，允许您定义标准阿拉伯数字和罗马数字之外的自定义编号系统。这对于支持不同的语言和文化偏好至关重要。

涉及使用计数器样式的主要 CSS 属性是：

• counter-reset: 将计数器初始化或重置为特定值。
• counter-increment: 递增计数器的值。
• content: 与 ::before 或 ::after 伪元素一起使用以显示计数器的值。
• counter() 或 counters(): 在 content 属性中使用的函数，用于格式化计数器的值。
• @counter-style: 定义具有各种属性的自定义计数器样式，以控制格式化。

@counter-style 的强大功能

@counter-style 规则是 CSS 计数器样式国际化的核心。它允许您定义具有各种属性的自定义编号系统，这些属性控制计数器值的呈现方式。让我们检查 @counter-style 规则中的关键属性：

• system: 指定用于生成计数器表示的算法。常见值包括 cyclic、numeric、alphabetic、symbolic、fixed 和 additive。
• symbols: 定义计数器样式使用的符号，例如数字、字母或自定义字符。
• additive-symbols: 与 additive 系统一起使用，用于定义符号及其对应的数值。
• suffix: 指定在每个计数器表示后追加的文本（例如，句点或右括号）。
• prefix: 指定在每个计数器表示之前预置的文本。
• range: 限制计数器样式适用的值的范围。
• pad: 指定要使用的最小位数，必要时用前导零填充。
• speak-as: 控制屏幕阅读器播报计数器值的方式，以提高可访问性。
• fallback: 指定如果浏览器不支持当前样式，则使用的备用计数器样式。

使用 @counter-style 的国际化示例

现在，让我们探讨一些使用 @counter-style 格式化不同语言和文化背景的计数器的实际例子。

1. 阿拉伯数字与阿拉伯-印度数字

虽然阿拉伯数字（0-9）被广泛使用，但许多阿拉伯语地区更喜欢使用阿拉伯-印度数字（٠‎-٩‎）。我们可以创建一个计数器样式来实现这一点：

@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

此代码定义了一个名为 arabic-indic 的计数器样式，该样式使用阿拉伯-印度数字作为符号。suffix 属性在每个数字后添加一个句点和一个空格。然后，CSS 将此样式应用于有序列表 (<ol>) 以阿拉伯-印度格式显示数字。

2. 罗马数字（大写和小写）

罗马数字常用于各种语境中，CSS 计数器样式可以轻松处理它们：

@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

此示例演示了如何创建大写 (upper-roman) 和小写 (lower-roman) 罗马数字计数器样式。然后，您可以使用 CSS 类（.upper-roman 和 .lower-roman）将这些样式应用于不同的列表。例如：

<ol class="upper-roman">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

<ol class="lower-roman">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

3. 格鲁吉亚数字

格鲁吉亚数字使用独特的字母系统。我们可以定义一个计数器样式来表示格鲁吉亚语中的数字：

@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

此示例使用 fixed 系统，因为格鲁吉亚编号系统具有有限的一组用于前 33 个数字的符号。range 属性将计数器样式限制为 1 到 33 之间的值。对于大于 33 的数字，您需要实现更复杂的逻辑或不同的编号系统。

4. 亚美尼亚数字

与格鲁吉亚数字类似，亚美尼亚数字也使用字母来表示数字：

@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

此示例与格鲁吉亚示例类似，使用 fixed 系统并将亚美尼亚字母定义为符号。range 设置为 1-39，涵盖了基本的亚美尼亚数字集。

5. CJK 数字（中文、日文、韩文）

CJK 数字提供更多复杂性，在正式和非正式语境中有不同的形式，并且粒度也不同。让我们看看简体中文：

@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

请注意，这只是一个简化的表示。完整的 CJK 数字支持，尤其对于较大的数字，需要更复杂的实现，包括 additive 系统和处理位值（十、百、千等）。此代码演示了基本的数字表示。

高级技术和注意事项

1. 组合计数器样式

您可以组合多个计数器样式来创建更复杂的编号方案。例如，您可以使用一个主计数器来表示章节，并使用一个辅助计数器来表示每个章节中的部分。

body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. '; 
}

h2::before {
  content: counter(chapter) '.' counter(section) '. '; 
}

此代码创建了一个分层编号系统，其中章节按顺序编号，部分在每个章节中编号（例如，1.1、1.2、2.1、2.2）。

2. 可访问性考虑因素

确保您的计数器样式可供残疾用户访问。使用 speak-as 属性控制屏幕阅读器播报计数器值的方式。例如：

@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

speak-as: numbers; 属性告诉屏幕阅读器将计数器值播报为数字。其他选项包括 spell-out（用于拼写数字）和 bullets（用于将计数器播报为项目符号）。

此外，为您的计数器样式中使用的任何自定义符号提供备用文本或说明，以确保视障用户能够理解编号内容的含义。

3. 浏览器兼容性

虽然现代浏览器广泛支持 CSS 计数器样式，但考虑旧版本的浏览器至关重要。使用 fallback 属性指定如果浏览器不支持主样式，则使用的备用计数器样式。例如：

@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

在此示例中，如果浏览器不支持 cyclic 系统或自定义符号，它将回退到 disc 列表样式。

4. 文化敏感性

为不同的语言和文化实现计数器样式时，请注意文化敏感性。研究每个地区使用的适当编号约定和符号。避免使用可能具有冒犯性或不适当的符号或格式。

例如，一些文化可能更喜欢在他们的编号系统中使用不同的标点符号或分隔符。确保您的计数器样式尊重这些偏好。

实际应用和用例

CSS 计数器样式可用于各种 Web 开发场景，包括：

• 生成目录： 自动为目录中的标题和副标题编号。
• 创建编号列表： 以不同的语言和样式格式化编号列表。
• 对教程中的步骤进行编号： 通过清晰且具有视觉吸引力的编号引导用户完成一系列步骤。
• 实现自定义分页： 使用独特的编号方案创建自定义分页控件。
• 显示排名列表： 使用不同的计数器样式以视觉上引人入胜的方式显示排名。
• 生成法律文件： 格式化具有特定编号要求的法律文件。
• 格式化科学论文： 显示具有适当编号的方程、图表和表格。

使用 CSS 计数器样式的最佳实践

为了确保您的 CSS 计数器样式有效且可维护，请遵循以下最佳实践：

• 为您的计数器样式使用描述性名称： 选择清楚地表明样式的目的和格式的名称（例如，arabic-indic、upper-roman、georgian）。
• 保持您的计数器样式模块化： 为不同的语言和编号系统定义单独的计数器样式。
• 使用 CSS 类来应用计数器样式： 避免直接将计数器样式应用于元素；而是使用 CSS 类来控制格式。
• 彻底测试您的计数器样式： 在不同的浏览器和设备上测试您的计数器样式，以确保它们正确呈现。
• 记录您的计数器样式： 为您的计数器样式提供清晰的文档，包括其目的、格式和用法。
• 优先考虑可访问性： 在创建计数器样式时始终考虑可访问性，并使用 speak-as 属性来确保屏幕阅读器正确播报计数器值。

结论

CSS 计数器样式为国际化 Web 上编号内容的格式提供了一种强大而灵活的机制。通过利用 @counter-style 规则及其各种属性，您可以创建自定义编号系统，以尊重不同地区的文化惯例和语言细微差别。通过遵循本指南中概述的最佳实践，您可以确保您的计数器样式对全球受众有效、可维护且可访问。随着 Web 开发的不断发展，了解和利用 CSS 计数器样式进行国际化对于创建真正包容和用户友好的 Web 体验将变得越来越重要。拥抱 CSS 计数器样式的强大功能，创建与来自世界各地用户的网站产生共鸣的网站。

延伸阅读

• MDN Web 文档：@counter-style
• CSS 计数器样式级别 3
• CSS 计数器样式的完整指南